<template>
  <div id="app" ref="app">
    <GoNotify :msg="notify.msg"
              :action="notify.action"
              :font="notify.font"
              :notify-show="notifyShow"
              :duration="notify.duration"
              :height="notify.height"
              :success="notify.success"
    ></GoNotify>

    <!-- 路由出口 -->
    <router-view/>

    <div id="nav-tab" ref="navtab" :class="showNavTab?'nav-active':'nav-no-active'"
         :style="{height:isAndroid?'60px':'88px'}">
      <div class="nav-tab-item" :class="{'active-nav':activeIndex === index}" v-for="(item,index) in routerOptions"
           :key="index"
           @click="clickM(index,item.path)"
           :style="{
             'width': `${activeIndex === index ? itemWidth + 10: itemWidth}%`,
             'height':`${isAndroid?'100%':'80%'}`}">
        <i class="iconfont" :class="item.meta.icon"></i>
        <p class="nav-tab-item_label">{{ item.meta.title }}</p>
      </div>
      <div class="nav-tab-overlay" :style="{
        'left':`${activeIndex * itemWidth}%`,
        'width':`${itemWidth + 10}%`,
        'height':`${isAndroid?'100%':'80%'}`}"></div>
    </div>
  </div>


</template>

<script>
import {mapMutations, mapState} from "vuex";
import GoNotify from "@/components/common/GoNotify";

export default {
  name: 'app',
  components: {GoNotify},
  computed: {
    ...mapState(['cards', 'user', 'notify', 'notifyShow']),
    isAndroid() {
      let u = navigator.userAgent;
      //android终端
      return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
    },
    showNavTab() {
      for (let card of this.cards) {
        if (card.active) {
          return false;
        }
      }
      return true;
    },
    // 利用计算属性,截取路由中3个需显示的tabbar
    routerOptions() {
      return this.$router.options.routes.slice(1, 5)
    },
    itemWidth() {
      return 90 / this.routerOptions.length;
    }
  },
  created() {
    // this.$router.push('/');
    this.activeIndex = 3;
  },
  mounted() {
    this.changeCup(this.user.cups[0]);
    this.$refs.navtab.addEventListener('touchmove', evt => {
      evt.preventDefault();
    })
  },
  data() {
    return {
      activeIndex: 0,
    }
  },
  methods: {
    ...mapMutations(['changeCup']),
    clickM(i, path) {
      if (this.$route.path !== path) {
        if (this.$route.path.startsWith('/home') && path === '/home') {
          return
        }
        this.$router.push(path);
        this.activeIndex = i;
      }
    }
  }

}
</script>
<style lang="less">
html {
  height: 100%;
}

#app {
  height: 100%;
  overflow: hidden;
  //font-family: ZCOOL, serif; // 样式统一设置，之后再改  time：2020-12-28
}

#nav-tab {
  position: fixed;

  width: 100%;

  background-color: #fff;
  display: flex;

  border-radius: 20px 20px 0 0;

  overflow: hidden;
  border: 0.2rem solid white;
  bottom: -1px;
}

.nav-tab-item {

  z-index: 2;
  transition: 0.3s;
  cursor: pointer;

  /* 居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nav-tab-item.active {
  width: 210px;
}

.nav-tab-item_icon {
  font-size: 32px;
  color: #4298e7;
  transition: 0.3s;
  transform: translate(0, 0px);
}

.active-nav .nav-tab-item_icon {
  transform: translate(0, -10px);
}

.nav-tab-item_label {
  font-size: 10px;
  color: #4298e7;
  opacity: 0;
  transition: 0.3s;
  user-select: none;
}

.active-nav .nav-tab-item_label {
  opacity: 1;
}

.nav-tab-overlay {
  position: absolute;
  left: 0;
  top: 0;

  width: 210px;

  background-color: #e4f2ff;
  border-radius: 20px;

  transition: 0.3s;
}


@keyframes k1 {
  0% {
    transform: translateY(80px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes k2 {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(80px);
  }
}

.nav-active {
  animation: k1 cubic-bezier(.76, -0.51, .29, 1.5) .5s forwards;
}

.nav-no-active {
  animation: k2 cubic-bezier(.76, -0.51, .29, 1.5) .5s forwards;
}


</style>
